.root {
  min-width: 200px;
  max-width: 500px;
  background-color: white;
  border: 2px solid var(--vd-color-gray-900);
  border-radius: 8px;
  overflow: hidden;
}

.header {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--vd-color-gray-800);
  align-items: center;
  gap: 4px;
  padding: var(--vd-spacing-xs);

  &:only-child {
    border-bottom: none;
  }
}

.type {
  font-size: var(--vd-font-size-h6);
  font-weight: bold;
  transform: scale(0.9);
  color: var(--vd-color-font-regular);
}

.name {
  font-size: var(--vd-font-size-h5);
  font-weight: bold;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  &:global(.abstract) {
    font-style: italic;
  }
}

.title {
  font-size: var(--vd-font-size-h6);
  color: var(--vd-color-font-regular);
}

.cells {
  min-height: 10px;

  &:not(:last-child) {
    border-bottom: 1px solid var(--vd-color-gray-800);
  }
}

/**
 * 属性
 */

.property,
.method {
  padding: 4px;
  display: flex;
  align-items: center;
  font-size: var(--vd-font-size-h6);
  width: 100%;
  overflow: hidden;

  &:hover {
    background-color: #ffffffb8;
  }
}

.propertyName,
.methodName {
  flex: 1;
  white-space: nowrap;
  padding-right: var(--vd-spacing-sm);
  overflow: hidden;
  text-overflow: ellipsis;

  &:global(.class) {
    text-decoration: underline;
  }

  &:global(.abstract) {
    font-style: italic;
  }
}

.propertyComment,
.methodComment {
  font-style: italic;
  color: var(--vd-color-font-placeholder);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
